<template>
  <div class="wrap">
    <section>
      <el-form ref="addForm" :model="addform" label-width="80px" @submit.prevent="onSubmit"
               style="margin:20px;min-width:600px;">

        <el-form-item label="蔬菜名">
          <template>
            <div style="width: 300px;display: inline-block;">
              <el-input v-model="addform.name" auto-complete="on"></el-input>
            </div>
            <span style="margin-left: 10px;color: #48576A;">例如：黄瓜</span>
          </template>
        </el-form-item>

        <el-form-item label="成熟期">
          <template slot-scope="scope">
            <div style="width: 300px;display: inline-block;">
              <el-input v-model="addform.maturity" auto-complete="on"></el-input>
            </div>
            <span style="margin-left: 10px;color: #48576A;">例如：25(天)-输入数字</span>
          </template>
        </el-form-item>

        <el-form-item label="预估产量">
          <template slot-scope="scope">
            <div style="width: 300px;display: inline-block;">
              <el-input v-model="addform.production" auto-complete="on"></el-input>
            </div>
            <span style="margin-left: 10px;color: #48576A;">例如：300斤-输入数字</span>
          </template>
        </el-form-item>

        <el-form-item label="库存">
          <template slot-scope="scope">
            <div style="width: 300px;display: inline-block;">
              <el-input v-model="addform.inventory" auto-complete="on"></el-input>
            </div>
            <span style="margin-left: 10px;color: #48576A;">例如：30(份)-输入数字</span>
          </template>
        </el-form-item>

        <el-form-item label="售价">
          <template slot-scope="scope">
            <div style="width: 300px;display: inline-block;">
              <el-input v-model="addform.price" auto-complete="on"></el-input>
            </div>
            <span style="margin-left: 10px;color: #48576A;">例如：59(元)-输入数字</span>
          </template>
        </el-form-item>

        <el-form-item label="标价">
          <template slot-scope="scope">
            <div style="width: 300px;display: inline-block;">
              <el-input v-model="addform.orgin_price" auto-complete="on"></el-input>
            </div>
            <span style="margin-left: 10px;color: #48576A;">例如：59(元)-输入数字</span>
          </template>
        </el-form-item>

        <el-form-item label="浇水间隔">
          <template slot-scope="scope">
            <div style="width: 300px;display: inline-block;">
              <el-input v-model="addform.plant_water_interval" auto-complete="on"></el-input>
            </div>
            <span style="margin-left: 10px;color: #48576A;">例如：3(时)-输入数字</span>
          </template>
        </el-form-item>

        <el-form-item label="施肥间隔">
          <template slot-scope="scope">
            <div style="width: 300px;display: inline-block;">
              <el-input v-model="addform.plant_fert_interval" auto-complete="on"></el-input>
            </div>
            <span style="margin-left: 10px;color: #48576A;">例如：3(时)-输入数字</span>
          </template>
        </el-form-item>

        <el-form-item label="锄草间隔">
          <template slot-scope="scope">
            <div style="width: 300px;display: inline-block;">
              <el-input v-model="addform.plant_weed_interval" auto-complete="on"></el-input>
            </div>
            <span style="margin-left: 10px;color: #48576A;">例如：3(时)-输入数字</span>
          </template>
        </el-form-item>

        <el-form-item label="除虫间隔">
          <template slot-scope="scope">
            <div style="width: 300px;display: inline-block;">
              <el-input v-model="addform.plant_bug_interval" auto-complete="on"></el-input>
            </div>
            <span style="margin-left: 10px;color: #48576A;">例如：3(时)-输入数字</span>
          </template>
        </el-form-item>
        <el-form-item label="列表图片">
          <template>
            <div class="p-listPic-upload">
              <el-button type="success">上传<i class="el-icon-upload el-icon--right"></i></el-button>
              <span class="upload_plant_pic"><input type="file" name="file" class="cfg_upload_pic" @change="upInputOnchange"></span>
            </div>
            <div style="width: 120px;height: 80px; background: #ffffff;overflow: hidden;margin-top: 20px" v-if="addform.list_pic">
              <img :src="addform.list_pic" />
            </div>
          </template>
        </el-form-item>

        <el-form-item label="详情图片">
          <template>
            <div class="p-listPic-upload">
              <el-upload drag action="/index.php?c=plant&a=uploadDetailPic" multiple :on-success="uploadSuccess" :on-remove="removePic">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过5000kb</div>
              </el-upload>
            </div>
            <div style="background: #ffffff;overflow: hidden;margin-top: 20px" v-if="addform.detail_pic">
              <img v-for="(item, index) in addform.detail_pic" :src="item.url" style="width: 120px;height: 80px;margin-right: 5px;" :key="index"/>
            </div>
          </template>
        </el-form-item>

        <el-form-item label="描述">
          <template>
            <div style="width: 600px;">
              <el-input type="textarea" v-model="addform.desc"></el-input>
            </div>
          </template>
        </el-form-item>
        <el-form-item label="种子详情">
          <editer ref="editer"></editer>
       </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.native="addPlant">立即创建</el-button>
        </el-form-item>

      </el-form>
    </section>
  </div>
</template>

<script type="text/ecmascript-6">
  import { apiTree } from '../../apiTree'
  import NProgress from 'nprogress'
  import util from '../../util'
  import editer from '../common/ueditor'
  import { returnEditerHtml } from '../../vuex/getters'

  export default {
    components: {
      editer
    },
    data() {
      return {
        addform: {
          type: 1,
          name: '',
          desc: '',
          list_pic: '',
          detail_pic: [],
          production: 0, // 产量
          maturity: 0, // 成熟期
          price: 0, // 单价
          orgin_price: 0, // 原价
          inventory: 0, // 库存
          content: '',
          plant_water_interval: 0, // 浇水间隔
          plant_fert_interval: 0, // 施肥间隔
          plant_weed_interval: 0, // 锄草间隔
          plant_bug_interval: 0 // 除虫间隔
        },
        fileList: []
      }
    },
    methods: {
      // 上传种子照片
      upInputOnchange(e) {
        var _that = this
        let file = e.target.files[0]
        let _reader = new FileReader()
        _reader.readAsDataURL(file)
        _reader.onload = function() {
          let _file = this.result
          let param = {'file': _file, 'type': 3}
          apiTree('upload/index', 'plant/upload', param, 'POST').then((res) => {
            if (res.s === 1) {
              _that.addform.list_pic = res.d.url
            }
          })
        }
      },
      uploadSuccess(res, _file) {
        if (res.s === 1) {
          let _name = _file.name
          this.addform.detail_pic.push({name: _name, url: res.d.url})
        }
      },
      removePic(_file) {
        this.addform.detail_pic.forEach((item, key) => {
          if (_file.name === item.name) {
            this.addform.detail_pic.splice(key, 1)
          }
        })
      },
      addPlant: function () {
        this.$confirm('确认提交吗？', '提示', {}).then(() => {
          this.$refs.editer.$emit('getUeditorContent')
          this.addform.content = returnEditerHtml(this.$store.state)
          if (util.isEmpty(this.addform.content)) {
            this.$message.error('内容为空')
            return
          }
          if (util.isEmpty(this.addform.name)) {
            this.$message.error('植物名为空')
            return
          }
          if (!this.addform.maturity || !util.isInt(this.addform.maturity)) {
            this.$message.error('输入正确的成熟期！')
            return
          }
          if (!this.addform.production || !util.isInt(this.addform.production)) {
            this.$message.error('输入正确的产量！')
            return
          }
          if (!this.addform.inventory || !util.isInt(this.addform.inventory)) {
            this.$message.error('输入正确的库存！')
            return
          }
          if (!this.addform.price) {
            this.$message.error('输入正确的单价！')
            return
          }
          if (!this.addform.orgin_price) {
            this.$message.error('输入正确的原价！')
            return
          }
          if (util.isEmpty(this.addform.plant_water_interval)) {
            this.$message.error('浇水间隔为空!');
            return
          }
          if (util.isEmpty(this.addform.plant_fert_interval)) {
            this.$message.error('施肥间隔为空!');
            return
          }
          if (util.isEmpty(this.addform.plant_weed_interval)) {
            this.$message.error('除草间隔为空!');
            return
          }
          if (util.isEmpty(this.addform.plant_bug_interval)) {
            this.$message.error('除虫间隔为空!');
            return
          }
          if (util.isEmpty(this.addform.list_pic)) {
            this.$message.error('列表图片为空！')
            return
          }
          if (util.isEmpty(this.addform.desc)) {
            this.$message.error('植物描述为空')
            return
          }
          let tempDetailPics = []
          this.addform.detail_pic.forEach((item, key) => {
            tempDetailPics.push(item.url)
          });
          if (util.isEmpty(tempDetailPics)) {
            this.$message.error('详情图片为空!');
            return
          }
          this.addform.detail_pic = tempDetailPics;
          NProgress.start();
          apiTree('plant/index', 'plant/setPlant', this.addform, 'POST').then((res) => {
            if (res.s === 1) {
              NProgress.done()
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$router.push('/plant/index');
            } else {
              this.$message.error(res.err_str)
            }
          })
        })
      }
    }
  }

</script>

<style lang="stylus" rel="stylesheet/stylus">
  .p-listPic-upload
    display inline-block
    margin-left 10px
    position relative
    cursor pointer
    .upload_plant_pic
      display block
      width 80px
      height 35px
      cursor pointer
      position absolute
      top 0px
      left 0px
      opacity 0
      & input[type=file]
        display block
        cursor pointer
        width 80px
        height 35px
  .p-pic-old-input
    display inline-block
    width 500px
</style>
